<template>

    <el-table :data="bannerList" highlight-current-row @current-change="" style="width: 100%">

        <el-table-column property="id" label="ID" width="80">
        </el-table-column>

        <el-table-column property="name" label="标题" width="">
            
        </el-table-column>

        <el-table-column property="position" label="横幅位置" width="">
            <template #default="scope">
                <span v-if="scope.row.position == 'home'">首页</span>
            </template>
        </el-table-column>
        <el-table-column property="platform" label="所属平台" width="">
            <template #default="scope">
                <span v-if="scope.row.platform == 'pc'">电脑端</span>
                <span v-if="scope.row.platform == 'xcx'">小程序</span>
            </template>
        </el-table-column>
        <el-table-column property="status" label="状态" width="">
            <template #default="scope">
                <span v-if="scope.row.status == 1">显示</span>
                <span v-if="scope.row.status == 0">隐藏</span>
            </template>
        </el-table-column>

        <el-table-column label="管理" width="">
            <template #default="scope">
                <a class="el-button el-button--primary" :href="'#/main/design/banner/edit/' + scope.row.banner_id">编辑</a>
                <el-button type="danger" @click="banner_delete(scope.row.banner_id)">删除</el-button>
                <!-- <el-button type="danger" @click="banner_delete( scope.$index )">删除</el-button> -->
            </template>
        </el-table-column>

    </el-table>
    <div class=" table-below ">
        <a class="el-button el-button--primary" 
            :href="'#/main/design/banner/create'">添加</a>
        <!-- <el-pagination @current-change="changePage" :page-size="per_page" layout="prev, pager, next" :total="total" /> -->
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const VITE_URL = window.VITE_URL;
const bannerList = ref<Array<object>>([])

const get_banner_list = () => {

    const url: string = VITE_URL + '/admin.design.banner/index';
    axios.get(url).then(res => {

        bannerList.value = res.data;

    })

}

get_banner_list();

const banner_delete = (banner_id: number) => {
    
    const url = VITE_URL + '/admin.design.banner/delete?banner_id=' + banner_id;
    axios.get( url ).then( res => {

        ElMessage({
            message: !res.data.status ? '删除成功' : res.data.message,
            duration: 1000,
            type: !res.data.status ? 'success' : 'error'
        })
        get_banner_list();
        
    })

}

</script>